<template>
	<view class="box">
		<view>
			<span class="order_title">订单修改</span>
			<view style="margin: 20rpx 0">
				<view class="order_item" v-for="(item, index) in orderData.orxg" :key="index">
					<view>{{ item.a }}</view>
					<view>{{ item.b }}</view>
					<view>{{ item.c }}</view>
					<view>{{ item.d }}</view>
				</view>
			</view>
		</view>
		<view>
			<span class="order_title" style="color: #007AFF;">订单发货</span>
			<view style="margin-top: 20rpx">
				<view class="order_item" v-for="(item, index) in orderData.orfh" :key="index">
					<view>{{ item.a }}</view>
					<view>{{ item.b }}</view>
					<view>{{ item.c }}</view>
					<view>{{ item.d }}</view>
				</view>
			</view>
		</view>
		<view>
			<span class="order_title" style="color: #FF9502;">订单售后</span>
			<view style="margin-top: 20rpx">
				<view class="order_item" v-for="(item, index) in orderData.orshho" :key="index">
					<view>{{ item.a }}</view>
					<view>{{ item.b }}</view>
					<view>{{ item.c }}</view>
					<view>{{ item.d }}</view>
				</view>
			</view>
		</view>
		<view>
			<span class="order_title" style="color: #F50057;">订单审核</span>
			<view style="margin-top: 20rpx">
				<view class="order_item" v-for="(item, index) in orderData.orshhe" :key="index">
					<view class="order_zt">{{ item.a }}</view>
					<view class="order_sj">{{ item.d }}</view>
					<view class="order_yy" v-show="item.b && item.b != ''">原因：{{ item.b }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderData: {
				orxg: [
					{
						a: '商品名字',
						b: '取消数量',
						c: 888,
						d: '2023-10-27 20:45'
					},
					{
						a: '商品名字',
						b: '商品已删除',
						d: '2023-10-27 20:45'
					},
					{
						a: '商品名字',
						b: '商品增加',
						c: 999,
						d: '2023-10-27 20:45'
					}
				],
				orfh: [
					{
						a: '商品名字',
						b: '发货数量',
						c: 888,
						d: '2023-10-27 20:45'
					}
				],
				orshho: [
					{
						a: '商品名字',
						b: '取消数量',
						c: 888,
						d: '2023-10-27 20:45'
					}
				],
				orshhe: [
					{
						a: '凭证支付审核拒绝',
						b: '打我的瓦达我的娃带娃达瓦65464',
						d: '2023-10-27 20:45'
					},
					{
						a: '凭证支付审核通过',
						d: '2023-10-27 20:45'
					}
				]
			}
		};
	}
};
</script>

<style lang="scss" scoped>
.box {
	border-left: 3px solid #000;
	margin: 20rpx 0 0 40rpx;
	padding-left: 40rpx;
	padding-bottom: 150rpx;

	.order_title {
		margin-left: -10rpx;
		font-weight: bold;
	}

	.order_item {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;

		view {
			width: 140rpx;
		}
		
		view:first-child {
			width: 100%;
			margin-bottom: 20rpx;
		}
		
		view:nth-child(2) {
			width: 180rpx;
		}
		
		view:nth-child(3) {
			width: 90rpx;
		}

		view:nth-child(4) {
			width: 240rpx;
		}
		
		.order_zt {
			width: 60% !important;
		}
		
		.order_yy {
			width: 100% !important;
		}
		
		.order_sj {
			width: 240rpx !important;
		}
	}
}
</style>
